<template>
  <div class="Topic">
    <div class="title">专题精选</div>
    <!-- 无需自动轮播，同时也不需要轮播点 -->
    <van-swipe :loop="false" :show-indicators="false" :width="300">
        <van-swipe-item v-for="item in topicList" :key="item.id">
            <img :src="item.item_pic_url" alt="" width="100%"  mode="widthFix"/>
            <h2 class="van-ellipsis">
                {{item.title}} <span>{{item.price_info | RMBFormat}}</span>
            </h2>
            <p class="van-ellipsis">{{item.subtitle}}</p>
        </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props:['topicList'],
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less' scoped>
.Topic {
  margin-top: 0.15rem;
  background-color: #fff;

  .title {
    text-align: center;
    height: .5rem;
    line-height: .5rem;
    font-size: .2rem;
  }

  .van-swipe{
    .van-swipe-item{
        margin-right: .15rem;
        padding-bottom: .1rem;
        height: auto;
        background-color: #fff;

        img{
            width: 100%;
            height: 200px;
        }

        h2{
            width: 90%;
            line-height: .4rem;
            font-size: .16rem;
            span{
                color: darkred;
            }
        }

        p{
            width: 90%;
        }
    }
  }
}
</style>
